<template>
  <Teleport to="body">
    <div v-if="modelValue" class="global-dialog-overlay" @click="closeOnMaskClick ? handleClose() : null">
      <div class="global-dialog" :class="{ 'global-dialog-large': size === 'large' }" @click.stop>
        <!-- 弹窗内容 -->
        <div class="dialog-content">
          <slot>
            <!-- 默认内容 -->
            <div class="tip">
              <div class="box">
                <div class="box-top" v-if="type === 'cz'">
                  <img src="@/assets/images/popup/suanlichongzhi.png" alt="算力充值">
                  <div class="suanliyue">你的算力余额为 {{ computeBalance }}</div>
                </div>
                <img v-if="type === 'cz'" class="suanliIcon" src="@/assets/images/popup/suanliIcon.png" alt="算力图标">
                <div class="box-content" :class="{ 'vip': type === 'vip' }">
                  <div class="box-content-title">
                    <div v-if="type === 'vip'" class="vipIcon"></div>
                    <img v-if="type === 'cz'" src="@/assets/images/popup/lianxikefu.png" alt="联系客服">
                  </div>
                  <div class="box-code">
                    <img src="@/assets/images/qrcode.png" alt="二维码">
                  </div>
                  <div class="box-btnBox">
                    <button class="box-btnBox-btn" @click="copyToClipboard('Suibozhushiu123')">复制微信号添加客服</button>
                  </div>
                </div>
              </div>
              <div class="closeBox">
                <img class="close" @click="handleCancel" src="@/assets/images/x.png" alt="关闭">
              </div>
            </div>
          </slot>
        </div>
      </div>
    </div>
  </Teleport>
</template>

<script setup lang="ts">
import { ref, watch, computed } from 'vue';
import { dialog } from '@/utils/dialog'

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  computeBalance: {
    type: Number,
    default: 0
  },
  type: {
    type: String,
    default: 'cz'
  },
  title: {
    type: String,
    default: '提示'
  },
  message: {
    type: String,
    default: ''
  },
  confirmText: {
    type: String,
    default: '确定'
  },
  cancelText: {
    type: String,
    default: '取消'
  },
  showCancel: {
    type: Boolean,
    default: true
  },
  showClose: {
    type: Boolean,
    default: true
  },
  showFooter: {
    type: Boolean,
    default: true
  },
  closeOnMaskClick: {
    type: Boolean,
    default: true
  },
  size: {
    type: String,
    default: 'default', // 'default' 或 'large'
    validator: (value: string) => ['default', 'large'].includes(value)
  }
});

const emit = defineEmits(['update:modelValue', 'confirm', 'cancel', 'close']);

// 关闭弹窗
const handleClose = () => {
  emit('update:modelValue', false);
  emit('close');
};

// 确认操作
const handleConfirm = () => {
  emit('confirm');
  handleClose();
};

// 取消操作
const handleCancel = () => {
  emit('cancel');
  handleClose();
};

// 监听 ESC 键关闭弹窗
const handleKeyDown = (e: KeyboardEvent) => {
  if (e.key === 'Escape' && props.modelValue) {
    handleClose();
  }
};

// 添加和移除键盘事件监听
watch(() => props.modelValue, (newValue) => {
  if (newValue) {
    document.addEventListener('keydown', handleKeyDown);
    // 禁止背景滚动
    document.body.style.overflow = 'hidden';
  } else {
    document.removeEventListener('keydown', handleKeyDown);
    // 恢复背景滚动
    document.body.style.overflow = '';
  }
});


// 方法
const copyToClipboard = (text) => {
  navigator.clipboard.writeText(text)
    .then(() => {
      dialog.alert({ iconType: 'sc', message: '客服微信号复制成功'});
    })
    .catch(err => {
      dialog.alert({message: '客服微信号复制失败'});
    });
};

</script>

<style lang="scss" scoped>
.global-dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1001;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.3s ease;
}

.global-dialog {
  animation: scaleIn 0.3s ease;
  .dialog-content {
    .dialog-message {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 16px;
      color: #595959;
      line-height: 1.5;
    }
  }

}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes scaleIn {
  from {
    transform: scale(0.9);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

</style>
<style lang="scss" scoped>
.tip {
  border-radius: 20px; // 35rpx / 1.7441 ≈ 20px
}

.box {
  position: relative;
  
  background: url(@/assets/images/popup/suanliTopBg.png) 0% 0% / 100% no-repeat;
  .box-top {
    padding-top: 14px; // 24rpx / 1.7441 ≈ 14px
    padding-left: 26px; // 45rpx / 1.7441 ≈ 26px
    box-sizing: border-box;
    img {
      width: 143px; // 249rpx / 1.7441 ≈ 143px
      height: 47px; // 82rpx / 1.7441 ≈ 47px
    }
    .suanliyue {
      margin-left: 10px; // 18rpx / 1.7441 ≈ 10px
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 16px; // 28rpx / 1.7441 ≈ 16px
      color: #FFFFFF;
      text-align: justified;
      font-style: normal;
      text-transform: none;
      margin-bottom: 14px; // 25rpx / 1.7441 ≈ 14px
    }
  }
  .suanliIcon {
    width: 149px; // 260rpx / 1.7441 ≈ 149px
    height: 166px; // 290rpx / 1.7441 ≈ 166px
    position: absolute;
    right: 26px; // 45rpx / 1.7441 ≈ 26px
    top: -27px; // -47rpx / 1.7441 ≈ -27px
  }
  .box-content {
    width: 378px; // 659rpx / 1.7441 ≈ 378px
    height: 431px; // 752rpx / 1.7441 ≈ 431px
    background: linear-gradient(180deg, #E4F2FD 0%, #FFFFFF 100%);
    border-radius: 20px; // 35rpx / 1.7441 ≈ 20px
    &-title {
      display: flex;
      justify-content: center;
      padding-top: 25px; // 44rpx / 1.7441 ≈ 25px
      margin-bottom: 16px; // 28rpx / 1.7441 ≈ 16px
      img {
        width: 168px; // 293rpx / 1.7441 ≈ 168px
        height: 48px; // 83rpx / 1.7441 ≈ 48px
      }
    }
  }
  .box-content.vip {
    height: 380px;
  }
  .box-code {
    margin: auto;
    width: 227px; // 396rpx / 1.7441 ≈ 227px
    height: 227px; // 396rpx / 1.7441 ≈ 227px
    background: #FFFFFF;
    border-radius: 13px; // 23rpx / 1.7441 ≈ 13px
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 28px; // 49rpx / 1.7441 ≈ 28px
    img {
      width: 208px; // 363rpx / 1.7441 ≈ 208px
      height: 208px; // 363rpx / 1.7441 ≈ 208px
    }
  }
  .box-btnBox {
    width: 100%;
    display: flex;
    justify-content: center;
    &-btn {
      width: 225px; // 392rpx / 1.7441 ≈ 225px
      height: 50px; // 87rpx / 1.7441 ≈ 50px
      background: linear-gradient(270deg, #006CFF 0%, #009FFF 100%);
      border-radius: 47px; // 82rpx / 1.7441 ≈ 47px
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 16px; // 28rpx / 1.7441 ≈ 16px
      color: #FFFFFF;
      text-align: center;
      font-style: normal;
      text-transform: none;
      border: none;
      cursor: pointer;
    }
  }
}
.closeBox {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 40px;
  .close {
    width: 32px; // 56rpx / 1.7441 ≈ 32px
    height: 32px; // 56rpx / 1.7441 ≈ 32px
    cursor: pointer;
  }
}
</style>